<!--理论题库-->
<template>
  <div class="theoreticalQuestion-page">
    <div class="pck-head">
      <div class="pck-head-item" :class="tabIndex == index ? 'pck-active' : ''" v-for="(item,index) in tablist" @click="tabClick(index)">{{ item }}</div>
    </div>
    <div class="theory-content">
      <!-- 章节 -->
      <ChapterExercises v-if="tabIndex == 0"></ChapterExercises>
      <!-- 单选 -->
      <SingleChoiceExercise v-if="tabIndex == 1"></SingleChoiceExercise>
      <!-- 多选 -->
      <MultipleChoicePractice v-if="tabIndex == 2"></MultipleChoicePractice>
      <!-- 判断 -->
      <JudgmentExercise v-if="tabIndex == 3"></JudgmentExercise>
      <!-- 错题 -->
      <MyWrongQuestion v-if="tabIndex == 4"></MyWrongQuestion>
      <!-- 收藏 -->
      <myCollection v-if="tabIndex == 5"></myCollection>
    </div>
  </div>
</template>

<script>
import ChapterExercises from "@/components/Theory/chapterExercises";
import SingleChoiceExercise from "@/components/Theory/singleChoiceExercise";
import MultipleChoicePractice from "@/components/Theory/multipleChoicePractice";
import JudgmentExercise from "@/components/Theory/judgmentExercise";
import MyWrongQuestion from "@/components/Theory/myWrongQuestion";
import MyCollection from "@/components/Theory/myCollection";
import watermark from "@/utils/watermark";
export default {
  name: "theoreticalQuestion",
  components: {
    ChapterExercises,
    SingleChoiceExercise,
    MultipleChoicePractice,
    JudgmentExercise,
    MyWrongQuestion,
    MyCollection
  },
  data() {
    return {
      tablist: ['章节练习', '单选练习', '多选练习', '判断练习', '我的错题', '我的收藏'],
      tabIndex: 0,
    }
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    if (userInfo) {
      watermark.set(userInfo.userName + userInfo.user_id)
    }
  },
  methods: {
    tabClick(e) {
      this.tabIndex = e
    }
  }
}
</script>

<style lang="scss" scoped>
.theoreticalQuestion-page {
  width: 100%;
  height: 100%;
}

</style>
